<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>点击文字弹出一个DIV层窗口代码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        .white_content {
            display: none;
            position: absolute;
            top: 10%;
            right: 300px;
            width: 500px;
            height: 500px;
            padding: 20px;
            z-index: 1002;
            overflow: auto;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=GjeU8zr7mlEk9BPERfQU3xWlg1TpKOSs"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="$('#light').show();loc()">请点这里</a>

<div id="light" class="white_content"></div>

<div id="app">
    {{address}}<br>
    {{addressName}}
</div>
</body>
</html>
<script type="text/javascript">


    var app = new Vue({
        el: '#app',
        data: {
            address: "",
            addressName: ""
        },
        methods: {}
    });

    // 百度地图API功能
    var map = new BMap.Map("light");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var geocoder = new BMap.Geocoder();

    function showInfo(e) {
        app.address = e.point.lng + "," + e.point.lat;
        geocoder.getLocation(e.point, function (rs) {
            app.addressName = rs.address;
        });
        $("#light").hide();
        /*console.log(rs.address); //地址描述(string)
        alert(rs.address);
        console.log(rs.addressComponents);//结构化的地址描述(object)
        console.log(rs.addressComponents.province); //省
        console.log(rs.addressComponents.city); //城市
        console.log(rs.addressComponents.district); //区县
        console.log(rs.addressComponents.street); //街道
        console.log(rs.addressComponents.streetNumber); //门牌号
        console.log(rs.surroundingPois); //附近的POI点(array)
        console.log(rs.business); //商圈字段，代表此点所属的商圈(string)*/
    }

    function loc() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true})
    }

    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL
    });
    //右上角，仅包含平移和缩放按钮
    /*缩放控件type有四种类型:
    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
    //添加控件和比例尺
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);

    map.addEventListener("click", showInfo);


</script>